<template>
	<div class="my-tao">
		<div class="my-tao-head">
			<div>
				<a style="color: #fff;" href="">
					<i style="font-size: 22px;" class="fa fa-angle-left"></i>
					<span>返回</span>
				</a>		
				 
				</div>
			</div>	
		<div class="navbar">
			<div class="navbar-avator">
					<div v-if="nickName" >
						<img src="//gw.alicdn.com/tps/i3/TB1yeWeIFXXXXX5XFXXuAZJYXXX-210-210.png_160x160.jpg" alt="" />
					</div>
					<div v-else>
						<a href="#/login">
							<img src="//gw.alicdn.com/tfscom/TB1_n4PKXXXXXcYXXXXNx3t4VXX-120-120.jpg_q30" alt="" />
						</a>
					</div>
					<span>{{nickName}}</span>
					<ul class="navbar-ul">
						<li v-for="item in myMessage">			
							<a v-if="nickName" href="'#/myself/'+item._id">个人信息</a>	
							<a v-else href="#">个人信息</a>
						</li>
						
						<li>
							<a href="#/guanzhu">收藏的宝贝</a>
						</li>
						<li>
							<a href="">我的足迹</a>
						</li>
					</ul>	
				 </div>	
			</div>
				 	
				
		<div class="my-tao-list">
			<ul class="my-tao-ul">
				<li >
					
					<a href="#/waitpay" >
						<i class="fa fa-credit-card"><b class="waitgo" v-if="nickName && waitPay.length>0">{{waitPay.length}}</b></i>
						<p >待付款</p>
						
					</a>
				</li>
				<li>
					<a href="#/waitgo">
						<i class="fa fa-truck"></i>
						<p>待发货 <b class="waitgo" v-if="nickName && waitgo.length>0 ">{{waitgo.length}}</b></p>
					</a>
				</li>
				<li>
					<a href="#/waitshou">
						<i class="fa fa-life-bouy"></i>
						<p>待收货<b class="waitgo" v-if="nickName && waitshou.length>0 ">{{waitshou.length}}</b></p>
					</a>
				</li>
				<li>
					<a href="#/waitping">
						<i class="fa fa-moon-o"></i>
						<p>待评价<b class="waitgo" v-if="nickName && waitping.length>0">{{waitping.length}}</b></p>
					</a>
				</li>
				
			</ul>
		</div>
		<div class="my-tao-all">
			<ul class="all">
				<li>
					<a href="#/allshop">
						<i style="color: orange;" class="fa fa-file-text-o"></i>
						<p>全部订单 <i class="fa fa-angle-right"></i></p>
					</a>
				</li>
				<li>
					<a href="#/address">
						<i style="color: orange;" class="fa fa-star"></i>
						<p>添加收货地址 <i class="fa fa-angle-right"></i></p>
					</a>
				</li>
				<li>
					<a href="#/shopcart">
						<i style="color:coral ;" class="fa fa-shopping-cart"></i>
						<p>购物车 <i class="fa fa-angle-right"></i></p>
					</a>
				</li>
				<li>
					<a href="#/paymoney">
						<i style="color: orange;" class="fa fa-resistance"></i>
						<p>支付页面 <i class="fa fa-angle-right"></i></p>
					</a>
				</li>
			</ul>
		</div>
		<div class="tuichu">
					<button class="logout" @click="logOut" v-if="nickName" >退出</button>
		</div>
	</div>

</template>

<script>
	import axios  from 'axios'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				myMessage:[],
				waitPay:[],
				waitgo:[],
				waitshou:[],
				waitping:[]
			}
		},
		mounted(){
			this.checkLogin(),
			this.mySelf(),
			this.payshop()
		},
		computed: {
			...mapState(['nickName'])
		},
		methods: {
			checkLogin() {
			var that = this;
			axios.get("/taobao/checkLogin").then(function(res) {
				
				var res = res.data;
				console.log(res);
				if(res.error == "0") {
					
					that.$store.commit("updateUserInfo", res.result);
				} 	
			})
		},
			logOut() {
				var that = this;
				axios.post("/taobao/logout").then(function(response) {
					let res = response.data;
					if(res.error == "0") {
						that.$store.commit("updateUserInfo", res.result.userName);
					}
				})
			},
			mySelf(){
				var that = this;
				axios.post('/taobao/myself').then(function(response){
					let res = response.data;
//					console.log(res)
					that.myMessage = res.result;
					console.log(that.myMessage);
				})
			},
			payshop(){
				var that = this;
				axios.post('/taobao/payshopMessage').then(function(result){
					var res = result.data.result;
//					console.log(res);
					that.waitPay = res.data;
					
				})
				axios.post('/taobao/payshopMessages').then(function(result){
					var res = result.data.result;
//					console.log(res);
					that.waitgo = res.data;		
				})
				axios.post('/taobao/waitshou').then(function(result){
					var res = result.data.result;
//					console.log(res);
					that.waitshou = res.data;		
				})
				axios.post('/taobao/waitping').then(function(result){
					var res = result.data.result;
//					console.log(res);
					that.waitping = res.data;		
				})
			},

		}
	}
</script>

<style scoped="">
	.my-tao {
		width: 360px;
		background: #eee;
		
		margin-bottom: 150px;
	}	
	.my-tao a {
		color: #555;
	}
	.my-tao-head {
		background: url(//gw.alicdn.com/tfscom/TB10.51HFXXXXXqXpXXYx6l2pXX-750-235.jpg_q90) no-repeat;
		height: 120px;
	}
	.my-tao-head>div {
		padding: 10px;
		color: #fff;
	}
	.my-tao-head>div {
		line-height: 35px;
	}

	 .navbar{
		background: #fff;
		height: 60px;	
		position: relative;	
		padding: 0 15px;
	}
	 .navbar .navbar-ul {
	 	float: left;
	 	height: 60px;
	 	line-height:70px;
	 	overflow: hidden;
	 }
	 .navbar .navbar-ul li{
	 	float: left;
	 	margin: 0 5px;	
	 }
	 .navbar .navbar-ul li a{
	 	border-right: solid 1px #ccc;
	 	padding-right: 10px;
	 	font-size: 14px;
	 }
	 .navbar-avator {
	 	height: 50px; 	
	 }	
	 .navbar-avator span{
	 	position: absolute;
	 	top: -35px;
	 	left: 90px;
	 	color: #fff;
	 	font-size: 20px;
	 }
	  .navbar-avator img {
	  	float: left;
	  	position: relative;
	  	margin-right: 10px;
	  	margin-top: -30px;
		width: 70px;
		border-radius: 50%;
	}
	.my-tao-list{
		margin-top: 15px;
		
	}
	.my-tao-list .my-tao-ul {
		text-align: center;		
	}
	
	.my-tao-ul li {
		float: left;
		width: 90px;	
	}
	.my-tao-ul li i {
		font-size: 23px;
		color: #888;
	}
	
	.my-tao-ul li p {
		font-size: 14px;
		
	}
	
	.my-tao-list {
		padding-top: 18px;
		height: 65px;
		background: #fff;
		line-height: 25px;
	}
	
	.my-tao-all {
		background: #fff;
		margin-top: 20px;
	}
	
	.my-tao-all li {
		padding-left: 8px;
		line-height: 50px;
		font-size: 14px;
		width: 360px;
		
	}
	
	.my-tao-all .all li a>p {
		border-bottom: solid 1px #eee;
		display: block;
		
		padding-right: 30px;
	}
	.my-tao-all .all li a>i {
		margin: 0 10px;
		float: left;
		margin-top: 19px;
	}
	
	.my-tao-all .all li p i {
		float: right;
		margin-top: 18px;
		
	}
	.tuichu{
		padding: 0 20px;
	}
.tuichu .logout{
	width: 320px;
	line-height: 35px;
	background: orangered;
	color: #fff;
	border-radius: 30px;
	cursor: pointer;
	border: none;
	position: fixed;
	bottom: 60px;
}
.my-tao-ul li {
	position: relative;
}
 .my-tao-ul .waitgo{
	position: absolute;
	left: 50px;
	color: orangered;
	border: solid 2px orangered;
	border-radius: 50%;
	font-size: 13px;
	padding: 1px 4px;
	line-height: 14px;
	top: -5px;
	background: #fff;
}

</style>
























